<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<c:set var="ctx" value="<%=basePath%>" />
<!DOCTYPE HTML >
<html>
  <head>
    <base href="<%=basePath%>">
    <title>开始透析</title>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-touch-fullscreen"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="云净,透析单,网页透析" />
	<meta http-equiv="description" content="云净透析单" />
	<link href="${ctx}image/yunjing/logo.ico" type="image/x-icon" rel="shortcut icon">
	<link rel="stylesheet" type="text/css" href="${ctx}bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}css/weui/weui.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}css/yunjing/mtxform.css" />
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-datetimepicker.min.css" />
	<style>
       .tx_table{margin-bottom: 0px !important;}
	   .tx_table>tbody>tr>td{
	     border-top:0px !important;
	   }
	   .tx_field_title{
      text-align:right;
      font-weight:700;
      line-height: 1.5;
      padding: 5px 0px;
    }
    /******覆盖样式*****/
    .info_input{height: 30px;border-radius: 3px;font-size: 12px;border: 1px solid #ccc;}
    #tx_form .btn{
    	padding:6px 22px;
    }
    #tx_form *{
    	font-size:15px;
    }
    #tx_form .input-sm{
    	height:34px;
    }
    .modal-open .modal,.modal_container{
   	    overflow: auto;
    }
    .hidden2 {
	    display: none!important;
	}
	.tx_field_title{
		width:152px;
	}
	</style>
  </head>
  <body>
  <form class="tx_from_begin" id="tx_form" style="padding: 15px 75px 15px 15px;">
    <input name="tx_number" type="hidden"  value="${param.tx_number}" />
    <input name="tx_time" type="hidden"  value="${param.tx_time}" />
    <input name="tx_zlxj_id" type="hidden"  value="${txzlxj.tx_zlxj_id}" />
    <input name="tx_zl_doctor" type="hidden"  value="${txzlxj.tx_zl_doctor}" />
    <input name="tx_zl_doctor_id" type="hidden"  value="${txzlxj.tx_zl_doctor_id}" />
    <input name="tx_zl_nurse_id" type="hidden"  value="${txzlxj.tx_zl_nurse_id}" />
    <input name="tx_sj_nurse_id" type="hidden"  value="${txzlxj.tx_sj_nurse_id}" />
   <table class="table tx_table" >
	   <tr>
	    <td align="right">
	      <div class="tx_field_title">开始时间:</div>
	    </td>
	    <td align="left">
            <div class="input-group date form_datetime" style="width: 100%;">
			   <input type="text"  class="input-sm form-control print_input_noborder" name="tx_start_time_hi"  value= ""   />
			   <input type="hidden" class="info_input" name="tx_start_time" value=""  />
			   <span class="input-group-addon hidden-print"><span class="glyphicon glyphicon-calendar"></span></span>
			</div>
	    </td>
	   </tr>
		
	   <tr>
	     <td align="right"><div class="tx_field_title">治疗护士:</div></td>
	     <td>
	       <div class="">
	         <select class="input-sm form-control" name="tx_zl_nurse" id="tx_zl_nurse">
	           <option value=""></option>
	           <c:forEach  items="${hsdic}" var="m" >
	               <option data-id="${m.dicid}" value="${m.dicname}">${m.dicname}</option>
	            </c:forEach>
	         </select>
	       </div>
	     </td>
	   </tr>
		
	   <tr>
	     <td align="right"><div class="tx_field_title" >穿刺/换药:</div></td>
	     <td >
	       <div class="" >
	         <select class="input-sm form-control " name="tx_fs" id="tx_fs" onchange="switchfs();">
	           <option value="1">换药</option>
	           <option value="0">穿刺</option>
	         </select>
	       </div>
	     </td>
	   </tr>	
		
	   <tr class="tx_common hidden" >
	     <td align="right" ><div class="tx_field_title tx_hs">穿刺护士:</div></td>
	     <td class="select_page">
	       <div class="">
	         <select class="input-sm form-control" name="tx_sj_nurse" id="tx_sj_nurse">
	            <option value=""></option>
	            <c:forEach  items="${hsdic}" var="m" >
	               <option data-id="${m.dicid}" value="${m.dicname}">${m.dicname}</option>
	            </c:forEach>
	         </select>
	       </div>
	     </td>
	   </tr>
	    
	   <tr class="tx_cc hidden">
	    <%--  <td align="right" ><div class="tx_field_title">穿刺方式:</div></td>
	     <td >
	       <div class="">
	         <select class="input-sm form-control" name="tx_ccfs">
	            <c:forEach  items="${ccfs}" var="m" >
	               <option value="${m.dicname}">${m.dicname}</option>
	            </c:forEach>
	         </select>
	       </div>
	     </td> --%>
	     <td align="right" ><div class="tx_field_title page_info_lable" style="font-size: 14px;color: #333;">穿刺方式:</div></td>
	     <td class="check_page">
	       <input type="text" class="info_input input-sm form-control"   name="tx_ccfs" value="<c:choose><c:when test="${empty txzlxj.tx_ccfs}">${txpgq.tx_ccfs}</c:when><c:otherwise>${txzlxj.tx_ccfs}</c:otherwise></c:choose>" readonly="readonly" placeholder="请选择"  /> 
	     </td>
	     <td align="right" class="check_page"><a href="javascript:void(0);"  title="tx_ccfs" ></a></td>
		   
	   </tr> 
	    <tr class="tx_cc hidden">
	   <%--   <td align="right" ><div class="tx_field_title">穿刺针:</div></td>
	     <td>
	       <div class="">
	        <select class="input-sm form-control" name="tx_ccz">
	            <c:forEach  items="${ccz}" var="m" >
	               <option value="${m.dicname}">${m.dicname}</option>
	            </c:forEach>
	         </select>
	       </div>
	     </td> --%>
	     <td align="right" class="" ><div class="tx_field_title page_info_lable" style="font-size: 14px;color: #333;">穿刺针:</div></td>
	     <td class="check_page">
	       <input type="text" class="info_input input-sm form-control"  name="tx_ccz" value="<c:choose><c:when test="${empty txzlxj.tx_ccz}">${txpgq.tx_ccz}</c:when><c:otherwise>${txzlxj.tx_ccz}</c:otherwise></c:choose>" readonly="readonly" placeholder="请选择"  /> 
	     </td>
	     <td align="right" class="check_page"><a href="javascript:void(0);"  title="tx_ccz" ></a></td>
	   </tr> 
		<tr class="tx_cc tx_ccfx">
	    <td align="right" ><div class="tx_field_title page_info_lable" style="font-size: 14px;color: #333;">A端穿刺方向:</div></td>
		     <td class="select_page xgtl_ccwd_page">
		       <input type="text" class="info_input input-sm form-control"   name="tx_ccfx" id="tx_ccfx" value="" readonly="readonly" placeholder="请选择"  />
		     </td>
		     <td align="right" class="check_page"><a href="javascript:void(0);"  title="tx_ccfx" ></a></td>
	    </tr>
	    <tr class="tx_cc  tx_ccwd">
	    <td align="right" ><div class="tx_field_title page_info_lable" style="font-size: 14px;color: #333;">穿刺位点:</div></td>
		     <td class="">
		       <div class="page_info page_info_ccwd" style="padding-left: 0;">
		        <input type="hidden" class="info_input"  name="tx_ccwd_a" id="selectMark_a" value="${txzlxj.tx_ccwd_a}" readonly="readonly" placeholder="请选择"  />
			    <input type="hidden" class="info_input"  name="tx_ccwd_v" id="selectMark_v" value="${txzlxj.tx_ccwd_v}" readonly="readonly" placeholder="请选择"  /> 
		        <input type="text" class="info_input input-sm form-control"   name="tx_ccwd" id="selectMark_show" value="" readonly="readonly" placeholder="请选择"  />
		       </div>
		     </td>
		     <td align="right" class="check_page"><a href="javascript:void(0);"  title="tx_ccwd" ></a></td>
	    </tr>
	    <tr class="tx_tlpic">
	    <td align="right" ><div class="tx_field_title page_info_lable" style="font-size: 14px;color: #333;">通路图片:</div></td>
		     <td class="">
		       <input type="text" class="info_input input-sm form-control"   name="tx_tltp" id="tx_viewpic" value="" readonly="readonly" placeholder="点击查看"  />
		     </td>
		     <td align="right" class="check_page"><a href="javascript:void(0);"  title="tx_tltp" ></a></td>
	    </tr>	    
	   <tr>
	    <td colspan="3" align="center" style="padding:18px 8px 8px 102px;">
	       <button type="button" class="btn btn-info btn_confirm" style="margin-right: 25px;">确认</button>
	       <button type="button" class="btn btn-default btn_cancel">取消</button>
	    </td>
	   </tr>
   </table>
  </form>  
 
  <div class="modal fade" id="select_Modal" role="dialog" style="display:none;" >
       <input type="hidden" name="input_type"  value=""   />
       <input type="hidden" name="input_name"  value=""  />
       <input type="hidden" name="input_id"  value=""  />
       <input type="hidden" name="input_val"  value=""  />
       <input type="hidden" name="info_lable"  value=""  />
       <input type="hidden" name="dic_type"  value=""  />
       <div class="weui-cells weui-cells_radio modal_container">
         <table class="table table_info page_fixed_head_table">
		   <tr class="">
		     <td class="col-xs-4" align="left">
		          <a href="javascript:void(0);"  class="" data-dismiss="modal" >
		           <img src="image/yunjing/mtxform/goback.png"  alt="返回" class=""  />
		          </a>
		     </td> 
		     <td class="col-xs-4" align="center"><span class="back_title">开始透析</span></td>
		     <td class="col-xs-4" align="right" style="padding-right: 20px;"><a href="javascript:void(0);"  class="modal_confirm_div" onclick=""><span class="back_save">保存</span></a></td>
		   </tr>
		   <tr><td colspan="3"><div class="modal_type_tittle"></div></td></tr>
	     </table>
         <div class="modal_content"></div> 
      </div>
  </div>
	<div id="view-markpic-wrap" style="display:none;">
        <style scoped>
            div#view-markpic-wrap .shadow{
                position: absolute;
                height: 100%;
                width: 100%;
                left: 0px;
                top: 0px;
                right:0;
                bottom:0;
                z-index: 9;
                opacity: 0.42;
                background: #000;
            }
            div#view-markpic-wrap {
                position: absolute;
                height: 100%;
                width: 100%;
                left: 0px;
                top: 0px;
                right:0;
                bottom:0;
                z-index: 10;
                overflow-y:auto;
                /* display: flex;
                justify-content: center;
                align-items: center; */
            }
            #markpicWarp2{
                position: absolute;
				left:50%;
				top:60px;
				width:92%;
				z-index:10;
				min-height:30vh;
				border-radius:4px;
				background: rgba(205, 212, 215, 0.15);
				display: flex;
                justify-content: center;
                align-items: center;
                transform: translate(-50%, 0);
            }
            #markpicWarp2 span.close-view-img{
                position: absolute;
                width:32px;
                height:32px;
                line-height: 32px;
                text-align:center;
                z-index:11;
                top:20px;
                left: 18px;
                font-size:26px;
                color: #f85b71;
                border: 2px solid #f85b71;
    			border-radius: 50%;
                opacity: 0.83;
                font-weight: 600;
                cursor: pointer;
                display: inline-flex;
			    justify-content: center;
			    align-items: center;
			    padding-bottom: 2px;
			    background: #fff;
            }
            
            /* 位点图片S  */
            #point_mark_img_wrap1{
	        	border:1px solid #ddd;
	        	border-radius:2px;
	        	min-height:30vh;
	        	position:relative;
	        	width:100%;
	        	padding:4px;
	        	background:#fff;
	        }
	        #point_mark_img_wrap1 img{
	        	border-radius:2px;
	        	width:100%;
	        	height:auto;
	        	left:0;
	        	right:0;
	        }
	        div.mark-target-a,div.mark-target-v {
			    background: #BABABA;
			    left: 40px;
			    z-index: 1001;
			    width: 32px;
			    border-radius: 16px;
			    height: 32px;
			    text-align: center;
			    line-height: 32px;
			    font-size:15px;
			    cursor: move;
			    color: #FBFBFB;
			}
			
	  		div.mark-target-a{
				background: #E73535;
				color:#fff;
			}
			div.mark-target-v{
				background: rgb(53, 162, 231);
				color:#fff;
			}
			div.mark-target-a span.mark-line{
	  			transform: rotate(30deg);
	  			background: #BABABA;
	  		}
	        div.mark-target-v span.mark-line {
			    transform: rotate(150deg);
			    background: #BABABA;
			}
			div.mark-target-a span.mark-line{
	  			background: #E73535;
	  		}
			div.mark-target-v span.mark-line {
			    background: #35A2E7;
			}
			span.mark-line {
			    display: inline-block;
			    position: absolute;
			    left: 50%;
			    top: 50%;
			    width: 86px;
			    height: 1px;
			    z-index: -1;
			    transform-origin: left bottom;
			}
			
			div.add-mark-text-wrap{
	  			position:absolute;
	  			border-radius: 4px;
	  			min-width:60px;
	  			min-height:28px;
	  			z-index:1000;
	  			display:inline-block;
	  			border-radius:4px;
	  			opacity:0.82;
	  		}
	  		div.add-mark-text-wrap .mark-text-line{
	  			display: inline-block;
			    position: absolute;
			    left: 50%;
	    		top: 50%;
			    width: 106px;
			    height: 1px;
			    background-color: #575757;
			    z-index: -1;
			    transform-origin: left bottom;
	  		}
	  		/* div.add-mark-text-wrap{
	  			box-shadow:2px 3px 8px rgba(0,0,0,.2), -3px -2px 8px rgba(0,0,0,.2);
	  		} */
	  		div.add-mark-text-wrap input{
	  			min-width:60px;
	  			width:auto;
	  			max-width:200px;
	  			border:0 !important;
	  			color:#333;
	  			height: 28px;
	  			cursor: default;
	  			background-color:#f9fbfb;
	  			position:absolute;
	  			left:0;
	  			top:0;
	  			font-size: 13px;
	  			z-index:1002;
	  			padding-left:2px;
	  			border-radius: 2px;
	  		}
	  		/* 位点图片E  */
	  		.close-view-img_,.modal_confirm_div,.xgtl_ccwd_page{
	  			cursor: pointer;
	  		}
        </style>
        <div class="shadow"></div>
        <div id="markpicWarp2">
        	<div id="point_mark_img_wrap1"><img src="" alt="血管通路图片"></div>
            <div class="close-view-img_" style="position:absolute;right:-14px;top:-40px;padding:20px;width:52px;height:52px;"><span class="close-view-img">×</span></div>
        </div>
    </div>
  </body>
  <style>
   a[title="站长统计"]{display: none;}
  </style>
  <script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="js/layer/layer.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript" src="bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
  <script type="text/javascript" src="js/yunjing/mtxform.js?v=201709061608"></script>
  <script type="text/javascript" src="js/common/common.js"></script>
  <script src="https://s13.cnzz.com/z_stat.php?id=1263104855&web_id=1263104855" language="JavaScript"></script>
  <script>
  $(function(){
     $(".form_datetime").datetimepicker({
        format: 'hh:ii',
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  true,
		autoclose: true,
		todayHighlight: true,
		startView: 0,
		startDate:new Date()
     });
     $("input[name='tx_start_time_hi']").val(getNowHiDate());
  
   //默认护士
   if(${userinfo.USER_PERMISSION==3||userinfo.USER_PERMISSION==4}){
     $("select[name='tx_zl_nurse']").find("option[value=${userinfo.USER_NAME}]").attr("selected","selected");
     $("input[name='tx_zl_nurse_id'][type='hidden']").val("${userinfo.USER_ID}");
     $("select[name='tx_sj_nurse']").find("option[value=${userinfo.USER_NAME}]").attr("selected","selected");
     $("input[name='tx_sj_nurse_id'][type='hidden']").val("${userinfo.USER_ID}");
   }
   
   //默认上次的穿刺/换药
   if("${lastzlxj.tx_ccfs}"!=""||"${lastzlxj.tx_ccz}"!=""){
       $("select[name='tx_fs']").find("option[value='0']").attr("selected","selected");
       $("input[name='tx_ccfs']").val("${lastzlxj.tx_ccfs}");
       $("input[name='tx_ccz']").val("${lastzlxj.tx_ccz}");
       $("tr.tx_common").removeClass("hidden");
	   $("tr.tx_cc").removeClass("hidden");$("div.tx_hs").text("穿刺护士");
	   //判断是穿刺方式是否包含 绳梯法
      if("${lastzlxj.tx_ccfs}".indexOf("绳梯法")>=0){
		   $("tr.tx_tlpic").addClass("hidden");
           $("tr.tx_ccwd").removeClass("hidden");
		 }else{
		   $("tr.tx_ccwd").addClass("hidden");
           $("tr.tx_tlpic").removeClass("hidden");
	   }
   }else{
       $("select[name='tx_fs']").find("option[value='1']").attr("selected","selected");
       $("tr.tx_common").removeClass("hidden");
	   $("tr.tx_cc").addClass("hidden");$("div.tx_hs").text("换药护士");
   }
   
   $(".btn_cancel").click(function(){
       parent.layer.close(parent.begintxpage);
       parent.layer.close(parent.confirmtxpage);
   });

  //保存数据
   $(".btn_confirm").click(function(){
     //校验时间格式
     var hi=$("input[name='tx_start_time_hi']").val();
     if(!checkhi(hi)){layer.msg("开始时间格式不正确！");return false;}
     if(""==$("select[name='tx_zl_nurse']").val()){layer.msg("请选择治疗护士！");return false;}
     if(""==$("select[name='tx_sj_nurse']").val()){ 
       var fs=$("#tx_fs option:selected").text();
       if("穿刺"==fs){layer.msg("请选择穿刺护士！");}
       if("换药"==fs){layer.msg("请选择换药护士！");}
       return false;
     }
     $("input[name='tx_start_time']").val(getNowymdDate()+" "+hi);  
     $("input[name='tx_sj_nurse_id'][type='hidden']").val($("#tx_sj_nurse option:selected").attr("data-id"));
     $("input[name='tx_zl_nurse_id'][type='hidden']").val($("#tx_zl_nurse option:selected").attr("data-id"));
     var form_data= $("#tx_form").serializeArray();
     $.ajax({
         type:"post",
         data:form_data,
         async:false,
         url:"user/txform_txbegin.shtml",
         dataType:"json",
         beforeSend:function(){
            $(".btn_confirm").attr("disabled","disabled");
         },
         success:function(data,status){
          parent.changetx_status("${param.tx_number}","透析中");
          if(data['status']==""){
              parent.$("#tx_content").load("user/SearchhzinfoBytxrq.shtml?tx_number=${param.tx_number}&tx_txdate=${param.tx_time}",function(){});
              parent.layer.msg("开始透析成功！");
              parent.layer.close(parent.begintxpage); 
            }else{layer.alert(data.status);}
          },error:function(xhr,textStatus,errorThrown ){
             $(".btn_confirm").attr("disabled",false);
             layer.msg("开始透析出错:"+errorThrown); 
          }
      });  
   });
   switchfs()
 });
 
  // 判断是否选择了绳梯法
  $("body").off("click.selectccfs").on("click.selectccfs",".modal_confirm_div",function(){
  	if($("input[name='info_lable']").val() == "穿刺方式:"){
  		var str = '';
        $("#select_Modal button.btn_active").each(function (i, v) {
            var ccfs = $(v).text() + ",";
            str += ccfs
        })
        if (str) {
            str = str.substring(0, str.length - 1);
        }
        $("#tx_ccfs").val(str)
        switchfs()
  	}
  })
  
   // 切换换药和穿刺显示
   function switchfs(){
     var va = $("select[name='tx_fs'] option:selected").val();
     if(va == "0"){
	      $("tr.tx_common").removeClass("hidden");
	      $("tr.tx_cc").removeClass("hidden");$("div.tx_hs").text("穿刺护士");
	      if($("input[name='tx_ccfs']").val().indexOf("绳梯法") >= 0){
	      	$("tr.tx_ccwd").removeClass("hidden")
	      	$("tr.tx_tlpic").addClass("hidden")
	      }else{
	      	$("tr.tx_tlpic").removeClass("hidden")
	      	$("tr.tx_ccwd").addClass("hidden")
	      }
	   }
	   if(va == "1"){
	      $("tr.tx_common").removeClass("hidden");
	      $("input[name='tx_ccfx']").val("");
          $("input[name='tx_ccwd_a']").val("");
          $("input[name='tx_ccwd_v']").val("");
          $("input[name='tx_ccwd']").val("");
	      $("tr.tx_cc,tr.tx_tlpic").addClass("hidden");$("div.tx_hs").text("换药护士");
	   }
   }
   
  	var xgtl_ccwd_page=null;
    $("body").on("click",".page_info_ccwd",function(){ 
       xgtl_pic_page=layer.open({
	        type: 2,
			title: false,
			closeBtn: 0,
			anim: 2,
			shadeClose: true,
			skin:'layui-layer-mtxform',
			area: ['100%', '100%'],
			content:'txform/mtxform_xgtlccwd.shtml?tx_number=${param.tx_number}' 
	   });
   });
   
	// 显示通路图片
  		var tx_number = ${param.tx_number};
  		var user_id = ${user_id.substring(0, 4)};
  		$("body").on("click","#tx_viewpic",function(){
  			var pic_view = $("#view-markpic-wrap");
  			var src = 'https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/${user_id.substring(0, 4)}/${param.tx_number}.png?tag='+parseInt(Math.random()*1000);
  			pic_view.find("img").attr("src",src);
  			pic_view.find("img").attr("onerror","this.src='https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/1162/default.png?v=20180126';")
  			
  			
  			$.post("xgtl/listxgtlwdt.shtml",{"tx_number":tx_number},function(res){
  				if(res.status.length == 0){
					return
				}
  				$("#point_mark_img_wrap1").find("div").remove()
				var mark_data = JSON.parse(res.status[0].tx_xgtl_text),			
				 	mark_A = mark_data.A,
				 	mark_V = mark_data.V,
				 	mark_T = mark_data.T;
				if(mark_A.length == 0 && mark_V == 0){
					return
				}
				
				mark_A.map(function (i, v) {
					var tag_span_a1 = '<span class="mark-line mark-line-a" style="transform: rotate(' + i.rotate +
						'deg);" data-rotate="' + i.rotate + '"></span>';
					var num = parseInt(i.markNum);
					var markDom = '<div class="mtx-mark-tag mark-target-a mark-target-a' + num + '" data-num=' + num +
						' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span_a1 + '</div>';
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
	
				mark_V.map(function (i, v) {
					//console.log(i)
					var tag_span = '<span class="mark-line mark-line-v" style="transform: rotate(' + i.rotate +
						'deg);" data-rotate="' + i.rotate + '"></span>';
					var num = parseInt(i.markNum);
					var markDom = '<div class="mtx-mark-tag mark-target-v mark-target-v' + num + '" data-num=' + num +
						' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span + '</div>';
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
	
				mark_T.map(function (i, v) {
					//console.log(i)
					var markDom = '<div class="add-mark-text-wrap" style="position:absolute;left:' + i.left + '%;top:' + i.top + '%;width:'+i.w+'%;">'
									+	'<input type="text"  class="mark-text-ipt" value="'+ i.text +'" readonly="true" style="width:'+ i.width +'px;">'
									+	'<span class="mark-text-line" style="transform: rotate(' + i.rotate + 'deg);" data-rotate="' + i.rotate + '"></span>'
									+'</div>'	
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
				
				var scale = $("#point_mark_img_wrap1").outerWidth() / 610; //PC端的宽度为600，计算缩放比例
				$("#point_mark_img_wrap1 .mtx-mark-tag").each(function (i, v) {
					var $that = $(this),
						width = parseInt($that.width()) * scale,
						height = parseInt($that.height()) * scale,
						left = parseInt($that.position().left) * scale,
						top = parseInt($that.position().top) * scale;
					$that.css({
						"left": left + "px",
						"top": top + "px",
						"width": width + "px",
						"height": height + "px",
						"line-height": height + "px",
						"border-radius": height / 2 + "px"
					})
					
					var $line = $that.find(".mark-line");
					$line.css({
						"width": $line.width() * scale,
						"transform": "rotate(" + $line.data("rotate") + "deg)"
					})
					if(scale < 1 ){
						$that.css({
							"transform": "scale(1.2,1.2)"
						})
						$line.css({
							"transform": "rotate(" + $line.data("rotate") + "deg) scale(0.8333)"
						})
					}
					if(scale > 1 ){
						$that.css({
							"font-size": "24px"
						})
						$line.css({
							"transform": "rotate(" + $line.data("rotate") + "deg)"
						})
					}
				})
				
				$("#point_mark_img_wrap1 .add-mark-text-wrap").each(function (i, v) {
					console.log(v)
					var $that = $(this),
						width = parseInt($that.width()) * scale,
						height = parseInt($that.height()) * scale;
					$that.css({
						/* "width": width + "px", */
						"height": height + "px"
					})
					
					var $line = $that.find(".mark-text-line");
					$line.css({
						"width": $line.width() * scale,
						"transform": "rotate(" + $line.data("rotate") + "deg)"
					})
				})
  			})
  			pic_view.css("display","flex");
  			pic_view.on("touchstart", "div,img",function (e) {
  				e.stopPropagation();
	            //e.preventDefault(); //阻止触摸时页面的滚动，缩放
  			})
  			$("#markpicWarp2 .close-view-img_ ,#view-markpic-wrap div.shadow").click(function(){
  				$("#view-markpic-wrap div.mtx-mark-tag , #view-markpic-wrap .add-mark-text-wrap").remove()
  				pic_view.css("display","none");
  			})
  		})
  		 
  		
  </script>
</html>